<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路飞动画</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./css/test.css">
</head>
<body>
    <div id="app">
        <!-- 海 -->
        <div class="sea">
            <!-- 液体 -->
            <div class="surface"></div>
        </div>
        <!-- 船 -->
        <div class="ship">
            <div class="rotate">
                <div class="move">
                    <div class="body">
                        <div class="waves">
                            <!-- 船体波浪 -->
                            <div class="bodywaves">
                                <!-- 开头的是css自定义属性，这里随机生成指定区间的
                                数值并赋值给自定义属性，而后会在css中通过var函数对其调用 -->
                                <!-- 循环生成50个船体浪花 -->
                                <div class="wave" v-for="i in 50":style="{
                                    '--left':randomNum(12,60)+'px',
                                    '--top':randomNum(-2,16)+'px',
                                    '--delay':randomNum(30,4000)+'ms'
                                }">
                                    <div class="graphic":style="{
                                        '--width':randomNum(9,18)+'px',
                                        '--height':randomNum(9,18)+'px'}"></div>
                                </div>
                            </div>
                            <!-- 左船桨波浪 -->
                            <div class="oarwaves left">
                                <!-- 循环生成20个左船桨浪花 -->
                                <div class="wave" v-for="i in 30"
                                :style="{
                                    '--left':randomNum(5,60)+'px',
                                    '--top':randomNum(-30,-15)+'px',
                                    '--delay':randomNum(1000,1800)+'ms'}">
                                    <div class="graphic":style="{
                                        '--width':randomNum(4,8)+'px',
                                        '--height':randomNum(4,8)+'px'}"></div>
                                </div>
                            </div>
                            <!-- 右船桨波浪 -->
                            <div class="oarwaves right">
                                <!-- 循环生成20个右船桨浪花 -->
                                <div class="wave" v-for="i in 30":style="{
                                    '--left':randomNum(5,60)+'px',
                                    '--top':randomNum(-30,-15)+'px',
                                    '--delay':randomNum(1000,1800)+'ms'}">
                                    <div class="graphic":style="{
                                        '--width':randomNum(4,8)+'px',
                                        '--height':randomNum(4,8)+'px'}"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 船体 -->
                        <div class="base"></div>
                        <!-- 前木板 -->
                        <div class="board front"></div>
                        <!-- 后木板 -->
                        <div class="board back"></div>
                    </div>
                    <!-- 船桨 -->
                    <div class="oars">
                        <!-- 左船桨 -->
                        <div class="oar left">
                            <div class="row left">
                                <div class="depth left">
                                    <div class="graphic left"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 右船桨 -->
                        <div class="oar right">
                            <div class="row right">
                                <div class="depth right">
                                    <div class="graphic right"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 路飞身体 -->
                    <div class="human">
                        <div class="legs">
                            <!-- 左腿 -->
                            <div class="leg left"></div>
                            <!-- 右腿 -->
                            <div class="leg right"></div>
                        </div>
                        <!-- 帽子 -->
                        <div class="hat"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{},
        methods:{
            //随机生成指定范围随机数(保留小数点后两位)
            randomNum(min,max){
               var num = (Math.random()*(max-min+1)+min).toFixed(2);
                return num;
            }
        }
    })
</script>